/**
 * 该文件用于创建 store
 */

import { createStore } from "vuex";

import { SET_MSG } from "./mutation-types";

// 创建 store
const store = createStore({
  // 定义数据
  state: {
    count: 10,
    msg: "~",
    todos: [
      { id: 1, text: "吃饭", done: false },
      { id: 2, text: "睡觉", done: false },
      { id: 3, text: "打豆豆", done: true },
    ],
    products: [
      { id: 1, name: "Apple", price: 10 },
      { id: 2, name: "Banana", price: 20 },
      { id: 3, name: "Orange", price: 30 },
    ],
    checkedIds: [1], // 用于存放勾选的商品的Id集合
  },

  /**
   * 定义 getter 的地方
   *    一个 getter 可以理解为 store 的计算属性
   */
  getters: {
    // state - 当前的 state 数据
    // getters - 当前的其他 getters 数据
    doneTodos(state, getters) {
      return state.todos.filter((item) => item.done);
    },
    undoneTodos(state) {
      return state.todos.filter((item) => !item.done);
    },
    // 被勾选了的商品集合数据
    checkedProducts(state) {
      return state.products.filter((item) =>
        state.checkedIds.includes(item.id)
      );
    },
    // 被勾选了的商品集合数据的总价
    checkedProductsTotal(state, getters) {
      return getters.checkedProducts.reduce((total, item) => {
        return (total += item.price);
      }, 0);
    },
    // getter 可以返回一个函数，后续调用就需要加括号。没有缓存了
    //    getProductById(1)
    getProductById(state) {
      return (id) => {
        return state.products.find((item) => item.id === id);
      };
    },
  },

  /**
   * 定义 mutation（突变） 的地方
   *    每一个突变都是一个函数，会接受到两个参数：
   *        1. state - 表示当前仓库的 state 数据
   *        2. payload - 负载，提交（commit）这个突变时传递过来的参数
   *
   *    PS:
   *      1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。（太绝对了，其实可以直接操作修改的）
   *      2. mutation 函数，必须是同步函数。
   */
  mutations: {
    set_count(state, payload) {
      console.log("set_count", payload);
      state.count = payload?.count || state.count + 1;
    },

    [SET_MSG](state) {
      state.msg += "~";
    },
  },
});

// 导出
export default store;

// const store = {
//   state: {
//     count: 10
//   },

//   mutations: {
//     set_count(state, payload) {
//       console.log('state', state)
//       console.log('payload', payload)
//     }
//   },

//   commit(type, payload) {
//     // 根据 type 来找到 mutations 中对应 type 的函数来调用
//     this.mutations[type](this.state, payload)
//   }
// }

// store.commit('set_count', 100)
